<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			    list-style: none;
			}
			.out_box{
				width: 1200px;
				height: 480px;
				/* border: 1px solid black; */
				position: relative;
				top: 300px;
				left: 155px;
			}
			h3{
				font-size: 20px;
				color: #5f6464;
				font-weight: normal;
				margin-bottom: 30px;
			}
			.focus_us{
				height: 68px;
				width: 1200px;
				padding: 30px 0px 0px;
				margin: 0px 0px 30px;
				border-bottom: 1px solid #ccc;
			}
			.focus_list {
			    height: 88px;
			    width: 1200px;
			    position: absolute;
			    top: -24px;
			    left: 70px;
			    display: flex;
			    align-items: flex-end;
			}
			.focus_list li{
				margin-left: 30px;
			}
			.icon {
			    display: block;
			    height: 28px;
			    width: 28px;
			    background: url(https://www.tencent.com/img/index/icon_wechat.png) no-repeat center;
			    background-size: 100% 100%;
			    position: relative;
			    transition: background 0.2s ease-in-out;
			}
			
			.i_weibo {
			    background: url(https://www.tencent.com/img/index/icon_weibo.png) no-repeat center;
			    background-size: 100% 100%;
			}
			.i_twitter {
			    background: url(https://www.tencent.com/img/index/icon_x.png) no-repeat center;
			    background-size: 100% 100%;
			}
			.i_in {
			    background: url(https://www.tencent.com/img/index/icon_in.png) no-repeat center;
			    background-size: 100% 100%;
			}
			.i_you {
			    background: url(https://www.tencent.com/img/index/icon_youtube.png) no-repeat center;
			    background-size: 100% 100%;
			}
			.theer_box{
				height: 260px;
				width: 1200px;
				position: absolute;
				top: 140px;
				/* border: 1px solid black; */
				display: flex;
				align-items: flex-start;
			}
			.join_list,.contact_us,.legal_info{
				margin-right: 120px;
			}
			.join_list ul li,.contact_us ul li,.legal_info ul li{
				font-size: 16px;
				color: #5f6464;
				font-weight: normal;
				margin-bottom: 18px;
			}
			.logo_tencent {
			    display: block;
			    height: 28px;
			    width: 212px;
			    position: absolute;
			    right: 75px;
			    top: 50%;
			    margin-top: -21px;
			}
			.logo_tencent img {
			    width: 100%;
				position: absolute;
				left: -120px;
			}
			.footer_area {
			    display: block;
			    width: 100%;
			    position: absolute;
			    bottom: 24px;
			    left: 0px;
			}
			.footer_area .links li {
			    display: inline-block;
			    float: left;
			    margin-right: 20px;
			}
			.footer_area .links li {
			    font-size: 14px;
			    color: #5f6464;
			    margin-bottom: 0px;
			}
			.footer_area .copyright {
			    font-size: 14px;
			    color: #5f6464;
			    float: left;
			    width: 100%;
			    margin-top: 12px;
			}
			.ten_totop--float--show {
			    bottom: 40px;
			}
			.ten_totop--float {
			    display: block;
			    position: fixed;
			    bottom: -200px;
			    right: 280px;
			    z-index: 98;
			    width: 60px;
			    height: 60px;
			    transition: ease all 0.3s;
			    background: #FFF;
			    border-radius: 50%;
			    border: 1px solid #0052D9;
			    padding: 0px;
			}
			.ten_totop--float:after {
			    content: "";
			    display: block;
			    width: 12px;
			    height: 12px;
			    position: absolute;
			    top: calc(50% - 3px);
			    left: calc(50% - 6px);
			    transform: rotate(-135deg);
			    border-bottom: 1px solid #0052D9;
			    border-right: 1px solid #0052D9;
			}
			
			.ten_totop--float--show {
			    bottom: 40px;
			}
			@media screen and (max-width: 1250px){
				.footer_area .links {
					width: 100%;
					overflow: hidden;
					margin-bottom: 10px;
				}
			}
			@media screen and (max-width: 1250px){
				.footer_con {
					width: 96%;
				}
			}
			@media screen and (max-width: 1250px){
				.join_us, .contact_us, .legal_info {
					width: 20%;
				}
			}
			@media screen and (max-width: 1250px){
				.footer_area .copyright {
					width: 100%;
					overflow: hidden;
				}
			}
			@media screen and (max-width: 768px){
				ul{
					display: none;
				}
				theer_box{
					display: flex;
					flex-direction: column;
				}
			}
			
		</style>
	</head>
	<body>
		<div class="out_box">
			<div class="focus_us">
				<h3 class="til">关注我们</h3>
				<ul class="focus_list">
					<li>
						<a href="#" class="wechat-btn">
							<i class="icon i_wechat"></i>
						</a>
					</li>
					<li>
						<i class="icon i_weibo"></i>
					</li>
					<li>
						<a href="https://twitter.com/TencentGlobal" target="_blank">
							<i class="icon i_twitter"></i>
						</a>
					</li>
					<li>
						<a href="https://www.linkedin.com/company/tencent/" target="_blank">
							<i class="icon i_in"></i>
						</a>
					</li>
					<li>
						<a href="https://www.youtube.com/@TencentGlobal" target="_blank">
							<i class="icon i_you"></i>
						</a>
					</li>
				</ul>
			</div>
			<div class="theer_box">
				<div class="join_list">
					<h3 class="til">加入我们</h3>
					<ul>
						<li>社会招聘</li>
						<li>校园招聘</li>
						<li>国际招聘</li>
					</ul>
				</div>
				<div class="contact_us">
					<h3 class="til">联系我们</h3>
					<ul>
						<li>客户服务</li>
						<li>合作洽谈</li>
						<li>腾讯采购</li>
						<li>诚信合规</li>
						<li>媒体及投资者</li>
					</ul>
				</div>
				<div class="legal_info">
					<h3 class="til">法律信息</h3>
					<ul class="legal_list">
						<li>服务协议</li>
						<li>隐私政策</li>
						<li>知识产权</li>
					</ul>
				</div>
				<div class="logo_tencent">
					<img src="https://www.tencent.com/img/index/tencent_logo.png" alt="">
				</div>
			</div>
			<div class="footer_area">
				<ul class="links">
					<li>法律声明</li>
					<li>阳光准则</li>
					<li>网站地图</li>
					<li>粤网文【2017】6138-1456号</li>
					<li>粤B2-20090059</li>
					<li>粤公网安备 44030502008569号</li>
				</ul>
				<br>
				<p class="copyright">
					Copyright © 1998 - 2024 Tencent. All Rights Reserved. 腾讯公司 版权所有
				</p>
				<a class="ten_totop ten_totop--float back_to_top ten_totop--float--show"></a>
			</div>
		</div>
	</body>
</html>